<template>
    <div>
        <el-upload
            class="upload-demo"
            action=""
            :auto-upload="false"
            :on-exceed="outlimit"
            :limit="maxNum"
            :file-list="fileList"
            :on-change="uploadonchange"
            :on-remove="uploadRemove"
            :disabled='isFalse'
            list-type="picture">
            <el-button size="small" type="primary">点击上传</el-button>
            <div slot="tip" class="el-upload__tip" v-show="showTip">
                jpg、png、pdf格式，不超过6MB
            </div>
        </el-upload>
    </div>
</template>

<script>
export default {
    components: {},
    props: {
        files:{
            // type: Array,
            default () {
                return []
            }
        },
        fileList: {
            type: Array,
            default () {
                return []
            }
        },
        maxNum: {
            type: Number,
            default () {
                return 4;
            }
        },
        isFalse: {
            type: Boolean,
            default () {
                return false;
            }
        },
        showTip:{
            type:Boolean,
            default:true
        }
    },
    data() {
        return {};
    },
    computed: {},
    methods: {
        //超过上传限制
        outlimit(){
            this.$notify.error({
                title: '提示',
                message: '超出上传文件个数限制!',
                showClose: false
            });
        },
        uploadonchange(file,filelist){
            console.log(file,111)
			var arr = file.name.split(".")
				// console.log(arr)
			if(arr[1] == "pdf"){
				file.url = "http://171.221.199.35:10109/pdf.png"
			}
            this.fileList.push(file)
            const isJPG = file.raw.type === 'image/jpeg';
            const isPNG = file.raw.type === 'image/png';
            const isPdf = file.raw.type === 'application/pdf';
            const isLt2M = file.raw.size / 1024 / 1024 < 6;
			// console.log(file.raw.size/1024/1024)
            if (!isJPG && !isPdf && !isPNG) {
                this.$notify.error({
                    title: '提示',
                    message: '上传文件只能是 JPG、PNG、PDF格式!',
                    showClose: false
                });
                this.fileList.pop()
            }
            if (!isLt2M) {
                this.$notify.error({
                    title: '提示',
                    message: '上传文件大小不能超过 6MB!',
                    showClose: false
                });
                this.fileList.pop()
            }
            // console.log(this.fileList,111)
            return  isLt2M;
        },
        uploadRemove(file,filelist){
            let fileList = this.fileList;
            if(fileList && fileList.length>0){
                for(var i=0;i<fileList.length;i++){
                    if(fileList[i]==file){
                        fileList.splice(i, 1)
                        break;
                    }
                }
            }
        }
    },
    mounted () {

    },
	watch:{
        files:function(value,oldValue){
            if(value){
                value.forEach(value => {
					console.log(value)
                    this.fileList.push({'url':value.url,'name':value.name,'status': 'success'});
                });
            }
        }
    }
};
</script>


<style lang="less" scoped>
// 深度作用器
/deep/.upload-demo{
    .el-upload{
        border: none;
        width: auto;
        height: auto;
        border-radius: 0;
        margin-right: 10px;
        float: none;
    }
}
</style>
